<template>
  <div class="register_step1">
    <div class="top">
      <span>{{ schedulingData.baseMap?.hosname }}</span>
      <span class="shu">|</span>
      <span>{{ schedulingData.baseMap?.bigname }}</span>
    </div>
    <div class="title">
      <span>{{ schedulingData.baseMap?.depname }}</span>
    </div>
    <div class="register_content">
      <div class="content_time">{{ schedulingData.baseMap?.workDateString }}</div>
      <div class="boxes" >
        <div class="boxe_item" v-for="(item,index) in schedulingData.bookingScheduleList" :key="index"
             @click="change_select(item)" :class="{active:workDate===item.workDate}" :id="returnStatus(item.status)">
          <div class="box_time" :class="{active:workDate===item.workDate}" :id="returnStatus(item.status)">
            <span>{{ item.workDate }}&nbsp;&nbsp;{{ item.dayOfWeek }}</span>
          </div>
          <div class="box_content" :class="{active:workDate===item.workDate}" :id="returnStatus(item.status)">
            <span v-show="item.status===-1" >停止挂号</span>
            <span v-show="item.status===0">{{ item.availableNumber === -1 ? '无号' : '有号' }}</span>
            <span v-show="item.status===1">即将放号</span>
          </div>
        </div>
      </div>
      <div class="pagination">
        <el-pagination layout="prev, pager, next" :total="total"
                       v-model:current-page="pageNo" @current-change="getHospitalScheduling"/>
      </div>
    </div>
    <div class="bottom">
      <div class="am">
        <div class="am_title">
          <span class="shu"></span>
          <span>上午号源</span>
        </div>
        <div class="am_box">
          <div class="number_source" v-for="(item,index) in schedulingDoctorAm" :key="item.id">
            <div class="left">
              <span class="professional">{{ item.title }}&nbsp;&nbsp;|&nbsp;&nbsp;{{ item.docname }}</span>
              <span>{{ item.skill }}</span>
            </div>
            <div class="right">
              <span>￥{{ item.amount }}</span>
              <el-button class="money"  :class="{disable:item}" @click="goRegister_step2(item.id)">剩余{{
                  item.availableNumber
                }}
              </el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="pm">
        <div class="pm_title">
          <span class="shu"></span>
          <span>下午号源</span>
        </div>
        <div class="pm_box">
          <div class="number_source" v-for="(item,index) in schedulingDoctorPm" :key="item.id">
            <div class="left">
              <span class="professional">{{ item.title }}&nbsp;&nbsp;|&nbsp;&nbsp;{{ item.docname }}</span>
              <span>{{ item.skill }}</span>
            </div>
            <div class="right">
              <span>￥{{ item.amount }}</span>
              <el-button class="money" @click="goRegister_step2(item.id)">剩余{{
                  item.availableNumber
                }}
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>

</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {reqHospitalScheduling, reqHospitalSpecific} from "@/api/hospital";
import {useRoute,useRouter} from "vue-router";

onMounted(() => {
  getHospitalScheduling()
})
const route = useRoute()
const router=useRouter()
// 分页器页数
let pageNo = ref<number>(1)
// 预约排班数据
let schedulingData = ref<any>({})
// 排班医生数据
let schedulingDoctorAm = ref<any>([])
let schedulingDoctorPm = ref<any>([])
// 选择标识
let workDate = ref<string>('')
let total = ref<number>(0)

const firstStatus=ref()

// 根据status返回id，渲染不同样式
const returnStatus=(status)=>{
  if(status===-1){
    return 'stop'
  }
  if(status===0){
    return 'normal'
  }
  if(status===1){
    return 'will'
  }
}
// 获取预约排班的数据
const getHospitalScheduling = async () => {
  let res = await reqHospitalScheduling(pageNo.value, 7, route.query.hoscode as string, route.query.depcode as string)
  schedulingData.value = res.data
  total.value = res.data?.total
  workDate.value = schedulingData.value.bookingScheduleList[0].workDate
  firstStatus.value=schedulingData.value.bookingScheduleList[0].status
  if(firstStatus.value===-1){
    return
  }
  getSchedulingDoctor()
}
// 获取具体某天排班医生数据
const getSchedulingDoctor = async () => {
  let res = await
      reqHospitalSpecific(route.query.hoscode as string, route.query.depcode as string, workDate.value)
  schedulingDoctorAm.value = []
  schedulingDoctorPm.value = []
  // 对数据进行上下午处理
  res.data.forEach((item) => {
    if (item.workTime === 0) {
      schedulingDoctorAm.value.push(item)
    } else {
      schedulingDoctorPm.value.push(item)
    }
  })


}
// 进入挂号页面第二步
const goRegister_step2=(id:string)=>{
  router.push({
    path:'register_step2',
    query:{
      docId:id
    }
  })
}

// 点击选择预约时间
const change_select = (item: any) => {
  if(item.status===-1){
    schedulingDoctorAm.value=[]
    schedulingDoctorPm.value=[]
  }
  if(item.status===0){
    workDate.value = item.workDate
    getSchedulingDoctor()
  }
  if(item.status===1){
    schedulingDoctorAm.value=[]
    schedulingDoctorPm.value=[]
  }
}

</script>

<style scoped lang="scss">
.register_step1 {
  .top {
    width: 100%;
    height: 20px;
    display: flex;

    span {
      -webkit-font-smoothing: antialiased;
      -webkit-tap-highlight-color: transparent;
      font-size: 15px;
      color: #666;
      font-family: Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
      margin: 0 10px;
      padding: 0;
      box-sizing: border-box;

    }

    .shu {
      color: #b1b6ac;
    }
  }

  .title {
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    font-family: Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
    margin: 0 10px;
    padding: 0;
    box-sizing: border-box;
    margin-top: 20px;
    letter-spacing: 1px;
    font-weight: 700;
    color: #333;
    font-size: 17px;
  }

  .register_content {
    margin-top: 50px;
    width: 100%;
    height: 200px;
    display: flex;
    flex-wrap: wrap;

    .content_time {
      width: 100%;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      -webkit-font-smoothing: antialiased;
      -webkit-tap-highlight-color: transparent;
      font-size: 15px;
      font-family: Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      margin-bottom: 20px;
      text-align: center;
      letter-spacing: 1px;
      color: #333;
    }

    .boxes {
      width: 100%;
      height: 100px;
      margin-bottom: 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      .boxe_item {
        width: 12%;
        margin-right: 10px;
        border: 1px solid #9dbaea;
        border-radius: 5px;

        &.active {
          box-shadow: 0 1px 5px rgba(73, 144, 241, 0.6);
          transform: scale(1.1);
          transition: all .4s;
        }
        &#stop{
          cursor: not-allowed
        }
        cursor: pointer;
        height: 80%;
        display: flex;
        flex-wrap: wrap;

        .box_time {
          width: 100%;
          height: 40%;
          font-size: 13px;
          background-color: #9dbaea;

          &.active {
            background-color: #4990F1;
          }
          &#stop{
            background-color: #7F828B;
          }

          display: flex;
          justify-content: center;
          align-items: center;
          color: white;
          font-weight: bolder;
        }

        .box_content {
          width: 100%;
          height: 60%;
          display: flex;
          font-size: 15px;
          justify-content: center;
          align-items: center;
          color: #9dbaea;

          &.active {
            color: #4990F1;
          }
          &#stop{
            color: #7F828B;
          }

          font-weight: bolder;
        }
      }
    }

    .pagination {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .bottom {
    margin-top: 50px;
    width: 100%;
    height: 500px;

    .am {
      width: 100%;
      display: flex;
      flex-wrap: wrap;

      .am_title {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #7f7f7f;

        .shu {
          margin-right: 10px;
          width: 5px;
          height: 20px;
          background-color: skyblue;
        }
      }

      .am_box {
        width: 100%;
        display: flex;
        flex-wrap: wrap;

        .number_source {
          width: 100%;
          height: 70px;
          margin: 20px 0;
          display: flex;

          .left {
            width: 70%;
            background-color: #FFFFFF;
            display: flex;
            flex-wrap: wrap;

            span {
              width: 100%;
              -webkit-font-smoothing: antialiased;
              -webkit-tap-highlight-color: transparent;
              font-size: 14px;
              font-weight: 700;
              line-height: inherit;
              cursor: default;
              font-family: Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
              margin: 0;
              padding: 0;
              box-sizing: border-box;
              margin-top: 10px;
              letter-spacing: 1px;
              color: #999;

              &.professional {
                letter-spacing: 1px;
                font-weight: 700;
                color: #333;
                font-size: 16px;
                display: flex;
                align-items: center;
              }
            }
          }

          .right {
            width: 30%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

            span {
              width: 40%;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #e04141;
            }

            .money {
              width: 40%;
              height: 60%;
              background-color: #4490F1;
              font-size: 16px;
              font-weight: bolder;
              color: white;
            }

          }

        }
      }

    }

    .pm {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      margin-top: 50px;

      .pm_title {
        color: #7f7f7f;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .shu {
          margin-right: 10px;
          width: 5px;
          height: 20px;
          background-color: skyblue;
        }
      }

      .pm_box {
        width: 100%;
        display: flex;
        flex-wrap: wrap;

        .number_source {
          width: 100%;
          height: 70px;
          margin: 20px 0;
          display: flex;

          .left {
            width: 70%;
            background-color: #FFFFFF;
            display: flex;
            flex-wrap: wrap;

            span {
              width: 100%;
              -webkit-font-smoothing: antialiased;
              -webkit-tap-highlight-color: transparent;
              font-size: 14px;
              font-weight: 700;
              line-height: inherit;
              cursor: default;
              font-family: Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
              margin: 0;
              padding: 0;
              box-sizing: border-box;
              margin-top: 10px;
              letter-spacing: 1px;
              color: #999;

              &.professional {
                letter-spacing: 1px;
                font-weight: 700;
                color: #333;
                font-size: 16px;
              }
            }
          }

          .right {
            width: 30%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

            span {
              width: 40%;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #e04141;
            }

            .money {
              width: 40%;
              height: 60%;
              background-color: #4490F1;
              font-size: 16px;
              font-weight: bolder;
              color: white;
            }

          }

        }
      }

    }
  }
}

</style>